<template>
    <div :style="`width:${props.width};height:${props.height}`">
        <!-- 两种搜索框 -->
        <div class="flex mb-2 ml-2">
            <!-- 客户搜索框 -->
            <el-input
                v-if="props.customerSearch"
                v-model="searchCustomerValue"
                style="width: 250px"
                placeholder="请输入客户关键字查询"
                clearable
                @input="searchCustomerEvent"
                @clear="inputClearEvent"
                @keydown.enter="searchCustomerEvent"
            />
            <el-button v-if="props.customerSearch" class="ml-1 mr-10" :icon="Search" @click="searchCustomerEvent"> 搜索 </el-button>
            <!-- 产品搜索框 -->
            <el-input
                v-if="props.productSearch"
                v-model="searchProductValue"
                style="width: 250px"
                placeholder="请输入客户产品关键字查询"
                @keydown.enter="searchProductEvent"
            />
            <el-button v-if="props.productSearch" class="ml-1" :icon="Search" @click="searchProductEvent"> 搜索 </el-button>
        </div>
        <!-- 客户列表 -->
        <el-scrollbar v-if="data.length !== 0" :height="props.height">
            <p
                :class="item.selected == true ? 'scrollbar-customer-list scrollbar-customer-list-selected' : 'scrollbar-customer-list'"
                v-for="(item, index) in data"
                :key="index"
                @click="selectCustomer(item)"
            >
                {{ props.customerAbbreviation ? item.customerAbbreviation : item.customerName }}
            </p>
        </el-scrollbar>
        <!-- 提示信息 -->
        <el-empty v-else description="暂无客户数据" style="height: calc(100vh - 140px); width: 100%"></el-empty>
    </div>
</template>

<script setup lang="ts">
import { getCustomerList } from '@/api/customer';
import { searchProductList } from '@/api/product';
import { Search } from '@element-plus/icons-vue';

onMounted(() => {
    updateCustomerListData();
});

/* ******************************通用属性/方法****************************** */
// 客户列表属性
const props = defineProps({
    // 宽度
    width: { type: String, default: '100%' },
    // 高度
    height: { type: String, required: true },
    // 是否显示客户搜索框
    customerSearch: { type: Boolean, default: true },
    // 是否显示产品搜索框
    productSearch: { type: Boolean, default: false },
    // 是否显示客户简称
    customerAbbreviation: { type: Boolean, default: false },
});
// 客户信息
const customerInfo = defineModel<{
    customerId: string;
    customerName: string;
    customerAbbreviation: string;
}>({ required: true });
// 搜索产品列表需要展示的数据
const productList = defineModel<{ customerAbbreviation: string; products: AjaxResponse['productList'] }[]>('productList', {
    required: false,
});

// 客户列表数据
type CustomerListItem = {
    selected: boolean;
    customerId: string;
    customerName: string;
    customerAbbreviation: string;
}[];
const data = reactive<CustomerListItem>([]);
let dataCache: CustomerListItem = [];

// 更新客户列表的方法
const updateCustomerListData = () => {
    // 清空表格数据
    data.length = 0;
    dataCache.length = 0;
    // 获取客户列表
    getCustomerList(true).then((res) => {
        res.data.forEach((item: any) => {
            const obj = {
                selected: false,
                customerId: item._id,
                customerName: item.customerName,
                customerAbbreviation: item.customerAbbreviation,
            };
            dataCache.push(obj);
            data.push(obj);
        });
    });
};

// 选中客户事件
const selectCustomer = (item: CustomerListItem[0]) => {
    // 取消所有选中
    data.forEach((item) => {
        item.selected = false;
    });
    // 标记被选中的客户
    item.selected = true;
    customerInfo.value.customerId = item.customerId;
    customerInfo.value.customerName = item.customerName;
    customerInfo.value.customerAbbreviation = item.customerAbbreviation;
};

/* ******************************搜索客户属性/方法****************************** */
// 搜索值
const searchCustomerValue = ref('');
// 搜索客户事件
const searchCustomerEvent = () => {
    if (searchCustomerValue.value == '') {
        // 原始客户数据
        data.length = 0;
        dataCache.forEach((item) => {
            data.push(item);
        });
    } else {
        // 筛选客户数据
        data.length = 0;
        dataCache.forEach((item) => {
            if (item.customerAbbreviation.includes(searchCustomerValue.value) || item.customerName.includes(searchCustomerValue.value)) {
                data.push(item);
            }
        });
    }
};
// 输入框清空事件
const inputClearEvent = () => {
    // 原始数据
    data.length = 0;
    dataCache.forEach((item) => {
        data.push(item);
    });
};

/* ******************************搜索产品属性/方法****************************** */
const searchProductValue = ref('');
// 搜索产品事件
const searchProductEvent = () => {
    if (searchProductValue.value == '') {
        // 原始客户数据
        data.length = 0;
        dataCache.forEach((item) => {
            data.push(item);
        });
    } else {
        // 清空数据
        productList.value?.splice(0);
        // 筛选产品数据
        searchProductList(searchProductValue.value).then((res) => {
            if (res.data.length == 0) {
                ElMessage.warning('没有找到相关产品');
            } else {
                // 加工数据
                res.data.forEach((item: any) => {
                    // 匹配客户简称
                    const customerAbbreviation = matchCustomerAbbreviation(item.customerId) || '';
                    // 查找能对应的产品数据
                    const data: any[] = [];
                    item.products.forEach((product: any) => {
                        if (product.productName.includes(searchProductValue.value)) {
                            data.push(product);
                        }
                        if (product.productSize.includes(searchProductValue.value)) {
                            data.push(product);
                        }
                        if (product.tissueSize.includes(searchProductValue.value)) {
                            data.push(product);
                        }
                        if (product.corrugatedSize.includes(searchProductValue.value)) {
                            data.push(product);
                        }
                        if (product.materialQuality.includes(searchProductValue.value)) {
                            data.push(product);
                        }
                    });
                    // 添加到列表中
                    productList.value?.push({ customerAbbreviation, products: data });
                });
            }
        });
    }
};
// 匹配客户简称
const matchCustomerAbbreviation = (customerId: string) => {
    return data.find((item) => item.customerId === customerId)?.customerAbbreviation;
};
</script>

<style scoped>
.scrollbar-customer-list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    cursor: pointer;
}

.scrollbar-customer-list:hover {
    background: var(--el-color-primary-light-7);
}

.scrollbar-customer-list-selected {
    background: var(--el-color-warning-light-9);
    color: var(--el-color-warning);
}
</style>
